import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { User, Award, Building } from 'lucide-react';

const UseCases = () => {
  const cases = [
    {
      icon: <User size={32} />,
      title: '新手博主',
      description: '快速找到账号定位，掌握爆款笔记逻辑，从0到1顺利起步。',
      bgColor: 'rgba(255, 36, 66, 0.05)'
    },
    {
      icon: <Award size={32} />,
      title: '成熟创作者',
      description: '突破内容创作瓶颈，十倍提升创作效率，将更多时间用于创意本身。',
      bgColor: 'rgba(255, 75, 43, 0.05)'
    },
    {
      icon: <Building size={32} />,
      title: '品牌/MCN机构',
      description: '实现内容规模化、标准化产出，数据驱动矩阵账号高效运营。',
      bgColor: 'rgba(255, 122, 28, 0.05)'
    }
  ];

  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.2,
  });

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <section id="use-cases" className="use-cases">
      <div className="container">
        <div className="section-header">
          <h2>为每一位创作者量身打造</h2>
          <p>无论您处于哪个阶段，红小匠·AI 都能成为您最得力的增长伙伴。</p>
        </div>
        <motion.div
          ref={ref}
          className="cases-container"
          variants={containerVariants}
          initial="hidden"
          animate={inView ? 'visible' : 'hidden'}
        >
          {cases.map((caseItem, index) => (
            <motion.div key={index} className="case-card" variants={itemVariants} style={{'--bg-color': caseItem.bgColor} as React.CSSProperties}>
              <div className="case-icon">{caseItem.icon}</div>
              <h3 className="case-title">{caseItem.title}</h3>
              <p className="case-description">{caseItem.description}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export default UseCases; 